<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-left">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-input
              size="mini"
              v-model="listQuery.searchKey"
              placeholder="通知名称/创建人"
              class="filter-item"
              @keyup.enter.native="handleFilter('searchKey')"
              @input="handleFilter('searchKey')"
            />
          </el-col>
          <el-col :span="3">
            <el-select
              size="mini"
              v-model="listQuery.webapiStatus"
              filterable
              clearable
              placeholder="选择状态"
              style="width: 100%"
              @change="handleFilter('webapiStatus')"
            >
              <el-option
                v-for="(item, index) in statusArr"
                :key="index + '1'"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="mini"
              v-model="listQuery.testingStatus"
              filterable
              clearable
              placeholder="选择测试结果"
              style="width: 100%"
              @change="handleFilter('filterDateType')"
            >
              <el-option
                v-for="(item, index) in testingTypeArr"
                :key="index + '2'"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="mini"
              v-model="listQuery.filterDateType"
              filterable
              clearable
              placeholder="选择日期类型"
              style="width: 100%"
              @change="handleFilter('filterDateType')"
            >
              <el-option
                v-for="(item, index) in timeTypeArr"
                :key="index + '3'"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-date-picker
              size="mini"
              v-model="listQuery.filterDate"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleFilter('filterDate')"
            >
            </el-date-picker>
          </el-col>
          <!-- <el-col :span="2">
            <el-button
              v-waves
              class="filter-item"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >
              查询
            </el-button>
          </el-col> -->
        </el-row>
      </div>
      <div class="filter-right">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="mini"
          @click="handleAdd"
        >
          新增任务告警
        </el-button>
      </div>
    </div>
    <div class="error_text">
      注意：通知方式为钉钉发送通知，如未填写钉钉机器人配置信息，则默认发送到品牌钉钉群。
    </div>
    <div style="margin-bottom: 12px">
      <el-link type="primary" :href="pdfhref" target="_blank"
        >点击查看使用说明文档<i class="el-icon-view el-icon--right"></i
      ></el-link>
    </div>
    <el-table
      v-loading="listLoading"
      :data="pageList"
      border
      fit
      stripe
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="70" align="center" />
      <el-table-column
        prop="webapi_name"
        label="通知名称"
        align="center"
        :show-overflow-tooltip="true"
        width="260"
      >
      </el-table-column>
      <el-table-column
        prop="webapi_type"
        label="通知方式"
        align="center"
        width="120"
      >
        <template slot-scope="{ row }">
          <span
            v-for="(item, index) in robotAlarmTypeLists"
            :key="'4webapi123' + index"
          >
            <span v-if="row.webapi_type == item.code">{{ item.name }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="testing_interval"
        label="自动测试间隔"
        align="center"
        width="110"
      >
        <template slot-scope="{ row }">
          <span>{{ row.testing_interval }}小时</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="webapi_endtime"
        label="通知截至日期"
        align="center"
        width="110"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="webapi_username"
        label="负责人"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="webapi_content"
        label="通知内容"
        align="center"
        :show-overflow-tooltip="true"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="webapi_class"
        label="类型"
        align="center"
        :show-overflow-tooltip="true"
        width="90"
      >
        <template slot-scope="{ row }">
          <b v-if="row.webapi_class == 'web'" style="color: #ae8f00"
            >网站监测</b
          >
          <b v-if="row.webapi_class == 'api'" style="color: #be77ff">API监测</b>
        </template>
      </el-table-column>
      <el-table-column
        prop="testing_status"
        label="测试结果"
        align="center"
        :show-overflow-tooltip="true"
        width="125"
      >
        <template slot-scope="{ row }">
          <b v-if="row.testing_status == 0" style="color: #f56c6c">
            <el-tooltip
              content="请检查：网站&API信息配置信息是否正确"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
            API异常
          </b>

          <b v-else-if="row.testing_status == 2" style="color: #f56c6c">
            <el-tooltip
              content="请检查：基础信息-通知配置信息是否正确"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
            钉钉通知异常
          </b>
          <b v-else-if="row.testing_status == 1" style="color: #67c23a">正常</b>
          <b v-else>-</b>
        </template>
      </el-table-column>
      <el-table-column
        prop="testing_time"
        label="测试时间"
        align="center"
        :show-overflow-tooltip="true"
        width="160"
      >
      </el-table-column>
      <el-table-column
        prop="webapi_status"
        label="状态"
        align="center"
        :show-overflow-tooltip="true"
        width="80"
      >
        <template slot-scope="{ row }">
          <b v-if="row.webapi_status == 'START'" style="color: #67c23a"
            >进行中</b
          >
          <b v-if="row.webapi_status == 'NOT_START'" style="color: #909399"
            >未开始</b
          >
          <b v-if="row.webapi_status == 'END'">已结束</b>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="152">
        <template slot-scope="{ row }">
          <span>{{ row.created_at | formate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" width="152">
        <template slot-scope="{ row }">
          <span>{{ row.updated_at | formate }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button @click="testingByid(scope.row)" type="text" size="small"
            >手动测试</el-button
          >
          <el-button @click="handleDetails(scope.row)" type="text" size="small"
            >详情</el-button
          >
          <el-button
            v-if="
              scope.row.webapi_status == 'NOT_START' ||
              scope.row.webapi_status == 'END'
            "
            @click="handleChangeDetails(scope.row)"
            type="text"
            size="small"
            style="color: #67c23a"
            >启动</el-button
          >
          <el-button
            v-if="scope.row.webapi_status == 'START'"
            @click="handleChangeDetails(scope.row)"
            type="text"
            size="small"
            style="color: #f56c6c"
            >结束</el-button
          >
          <el-button
            @click="handleModify(scope.row)"
            :disabled="scope.row.webapi_status == 'START'"
            type="text"
            size="small"
            >修改</el-button
          >
          <el-button
            @click="handleLogs(scope.row)"
            type="text"
            size="small"
            style="color: #303133"
            >日志</el-button
          >
          <el-button
            @click="handleDelete(scope.row)"
            :disabled="scope.row.webapi_status == 'START'"
            type="text"
            size="small"
            :style="
              scope.row.webapi_status == 'START'
                ? 'color: #C0C4CC;'
                : 'color:#f56c6c'
            "
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getPageList"
    />

    <!-- 新增项目 -->
    <el-drawer
      size="50%"
      :close-on-press-escape="false"
      :visible.sync="dialogFormVisible"
      :title="title"
      :wrapperClosable="false"
    >
      <el-form :model="form" :rules="rules" ref="form" :disabled="isDetails">
        <el-divider content-position="left"
          ><b style="font-size: 18px">基础信息</b></el-divider
        >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="通知名称"
              label-width="120px"
              prop="webapiName"
            >
              <el-input
                v-model="form.webapiName"
                autocomplete="off"
                maxlength="35"
                @input="changeValue('webapiName', '35')"
                placeholder="请输入通知名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="通知方式"
              label-width="120px"
              prop="webapiType"
            >
              <el-select
                ref="selectWebapiType"
                v-model="form.webapiType"
                filterable
                clearable
                placeholder="请选择通知方式"
                style="width: 100%"
                @change="webapiTypeSel"
              >
                <el-option
                  v-for="(item, index) in robotAlarmTypeLists"
                  :key="index + '4'"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌" label-width="120px" prop="brandName">
              <el-select
                ref="selectBrandName"
                v-model="form.brandName"
                filterable
                clearable
                placeholder="请选择品牌"
                style="width: 100%"
                @change="brandIdSel"
              >
                <el-option
                  v-for="(item, index) in brandsLists"
                  :key="index + '5'"
                  :label="item.brand_name"
                  :value="item.brand_name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目" label-width="120px" prop="projectName">
              <el-select
                v-model="form.projectName"
                filterable
                clearable
                placeholder="请选择项目"
                style="width: 100%"
                @change="projectIdSel"
              >
                <el-option
                  v-for="(item, index) in projectLists"
                  :key="index + '6'"
                  :label="item.project_name"
                  :value="item.project_name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="通知截至日期"
              label-width="120px"
              prop="webapiEndtime"
            >
              <el-date-picker
                style="width: 100%"
                v-model="form.webapiEndtime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="负责人"
              label-width="120px"
              prop="webapiUseridArr"
            >
              <el-select
                multiple
                collapse-tags
                v-model="form.webapiUseridArr"
                filterable
                placeholder="请选择负责人"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in userLists"
                  :key="index + '7'"
                  :label="item.name"
                  :value="item.unionid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="通知配置" label-width="120px" prop="webapiConfig">
          <vue-json-editor
            v-model="form.webapiConfig"
            :showBtns="false"
            :mode="'code'"
            lang="zh"
            :expandedOnStart="false"
            @json-change="onJsonSave"
            @json-save="onJsonSave"
            @has-error="onError"
          />
        </el-form-item>
        <el-form-item label="通知内容" label-width="120px" prop="webapiContent">
          <el-input
            type="textarea"
            rows="4"
            maxlength="200"
            resize="none"
            @input="changeValue('webapiContent', '200')"
            placeholder="请输入通知内容"
            v-model="form.webapiContent"
          >
          </el-input>
        </el-form-item>
        <el-divider content-position="left"
          ><b style="font-size: 18px">网站&API信息</b></el-divider
        >
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" label-width="120px" prop="webapiClass">
              <el-select
                v-model="form.webapiClass"
                filterable
                clearable
                placeholder="请选择类型"
                style="width: 100%"
                @change="webapiClassSel"
              >
                <el-option
                  v-for="(item, index) in webapiClassArr"
                  :key="index + '8'"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- api -->
        <el-row v-if="form.webapiClass == 'api'">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="API域名"
                label-width="120px"
                prop="webapiDomain"
              >
                <el-input
                  v-model="form.webapiDomain"
                  autocomplete="off"
                  maxlength="100"
                  @input="changeValue('webapiDomain', '100')"
                  placeholder="请输入API域名，示例 http://www.morefun.me"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="API路径"
                label-width="120px"
                prop="webapiPath"
              >
                <el-input
                  v-model="form.webapiPath"
                  autocomplete="off"
                  maxlength="100"
                  @input="changeValue('webapiPath', '100')"
                  placeholder="请输入API路径，示例 /status/check 或 /"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="请求方式"
                label-width="120px"
                prop="webapiMethod"
              >
                <el-select
                  v-model="form.webapiMethod"
                  filterable
                  clearable
                  placeholder="请选请求方式"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in methodTypeLists"
                    :key="index + '9'"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="返回值校验"
                label-width="120px"
                prop="webapiCheck"
              >
                <el-col :span="20">
                  <el-input
                    v-model="form.webapiCheck"
                    autocomplete="off"
                    maxlength="50"
                    @input="changeValue('webapiCheck', '100')"
                    placeholder="请输入返回值校验,引号英文,示例success:true"
                  ></el-input>
                </el-col>
                <el-col :span="2" style="margin-left: 5px; color: #909399">
                  <el-tooltip
                    effect="dark"
                    content="填写本项，则获取接口响应返回体对象最外层的键值对做判断，未取到对应键值对，则认为接口请求失败。"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item
            label="API参数配置"
            label-width="120px"
            prop="webapiData"
          >
            <vue-json-editor
              v-model="form.webapiData"
              :showBtns="false"
              :mode="'code'"
              lang="zh"
              :expandedOnStart="false"
              @json-change="onWebapiJsonSave"
              @json-save="onWebapiJsonSave"
              @has-error="onError"
            />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="自动测试间隔"
                label-width="120px"
                prop="testingInterval"
              >
                <el-select
                  v-model="form.testingInterval"
                  filterable
                  clearable
                  placeholder="请选请求方式"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in testingArr"
                    :key="index + '10'"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="测试成功通知"
                label-width="120px"
                prop="sendSuccessMsg"
              >
                <el-col :span="4">
                  <el-switch
                    v-model="form.sendSuccessMsg"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                </el-col>
                <el-col :span="2" style="margin-left: 5px; color: #909399">
                  <el-tooltip
                    effect="dark"
                    content="开启本项，则不论是否成功失败均会推送钉钉通知；关闭本项，则只会响应失败时推送钉钉通知。"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <!-- 网站 -->
        <el-row v-if="form.webapiClass == 'web'">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="网站域名"
                label-width="120px"
                prop="webapiDomain"
              >
                <el-input
                  v-model="form.webapiDomain"
                  autocomplete="off"
                  maxlength="100"
                  @input="changeValue('webapiDomain', '100')"
                  placeholder="请输入网站域名，示例 http://www.morefun.me"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="请求方式"
                label-width="120px"
                prop="webapiMethod"
              >
                <el-select
                  disabled
                  v-model="form.webapiMethod"
                  filterable
                  clearable
                  placeholder="请选请求方式"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in methodTypeLists"
                    :key="index + '11'"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="自动测试间隔"
                label-width="120px"
                prop="testingInterval"
              >
                <el-select
                  v-model="form.testingInterval"
                  filterable
                  clearable
                  placeholder="请选请求方式"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in testingArr"
                    :key="index + '12'"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="测试成功通知"
                label-width="120px"
                prop="sendSuccessMsg"
              >
                <el-col :span="4">
                  <el-switch
                    v-model="form.sendSuccessMsg"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                </el-col>
                <el-col :span="2" style="margin-left: 5px; color: #909399">
                  <el-tooltip
                    effect="dark"
                    content="开启本项，则不论是否成功失败均会推送钉钉通知；关闭本项，则只会响应失败时推送钉钉通知。"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-form-item label="" label-width="120px">
          <div class="error_text">
            注意：
            <div>API返回值校验未填写，则以http状态200为成功请求状态；</div>
            <div>接口调用间隔时间以设置的自动测试间隔时间为准；</div>
            <div>成功消息晚9点至次日9点不推送消息</div>
          </div>
        </el-form-item>
      </el-form>
      <div class="el_drawer_footerbtn">
        <el-button @click="resetForm('form')" style="margin: 0 10px">{{
          !isDetails ? "取 消" : "关 闭"
        }}</el-button>
        <el-button type="primary" @click="submitForm('form')" v-if="!isDetails"
          >确 定</el-button
        >
      </div>
    </el-drawer>

    <!-- 测试结果弹窗 -->
    <el-dialog
      title="测试结果"
      :visible.sync="testingFormVisible"
      width="550px"
    >
      <div>
        <el-descriptions title="API访问" :column="1">
          <el-descriptions-item label="状态">
            <el-tag size="small" type="success" v-if="testingForm.api_status"
              >成功</el-tag
            >
            <el-tag size="small" type="danger" v-else>失败</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="结果">{{
            testingForm.api_res
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="钉钉消息" :column="1">
          <el-descriptions-item label="状态">
            <el-tag size="small" type="success" v-if="testingForm.dd_status"
              >成功</el-tag
            >
            <el-tag size="small" type="danger" v-else>失败</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="结果">{{
            testingForm.dd_res
          }}</el-descriptions-item>
        </el-descriptions>
        <el-button @click="testingFormVisible = false" size="mini"
          >关闭</el-button
        >
      </div>
    </el-dialog>

    <!-- 使用说明文档弹窗 -->
    <pdf :pdfurl="pdfurl" pdfcode="taskwebapi" :hrefurl="pdfhref"></pdf>

    <!-- 日志列表展示 -->
    <el-dialog title="日志列表" :visible.sync="webapiLogsVisible" width="60%">
      <el-table :data="webapiLogsData">
        <el-table-column
          property="log_name"
          label="名称"
          width="180"
        ></el-table-column>
        <el-table-column property="is_success" label="是否成功" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_success" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="log_res" label="结果">
          <template slot-scope="scope">
            <el-popover
              trigger="hover"
              placement="top"
              popper-class="popper_style"
            >
              <p>{{ scope.row.log_res }}</p>
              <div
                slot="reference"
                style="
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                "
              >
                <p>{{ scope.row.log_res }}</p>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column property="alarm_res" label="钉钉告警结果">
          <template slot-scope="scope">
            <el-popover
              trigger="hover"
              placement="top"
              popper-class="popper_style"
            >
              <p>{{ scope.row.alarm_res }}</p>
              <div
                slot="reference"
                style="
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                "
              >
                <p>{{ scope.row.alarm_res }}</p>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="152">
          <template slot-scope="{ row }">
            <span>{{ row.created_at | formate }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import index from "./index";
export default index;
</script>


<style lang="scss" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}

.Charge-left {
  width: 375px;
  // height: 800px;
}

.Charge-left {
  width: 525px;
  // height: 800px;
}
</style>

<style>
.el-tooltip__popper {
  max-width: 30%;
}
.popper_style {
  width: 600px;
}
</style>
